<!--
 * @Description: 项目经理月报详情页
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-04-06 16:37:54
 * @LastEditTime: 2022-04-15 16:05:29
 * @FilePath: \cscec-pms-admin\src\views\project\projectManagerMonthlyReport\projectManagerMonthlyReportView.vue
-->
<template>
  <base-breadcrumb>
    <a-spin :spinning="loading" :class="{ 'view-wrapper': isAudit }">
      <a-card>
        <title-name title="基本信息" />
        <custom-form ref="form" :is-validate="true" :edit-model="''" :form="form" :form-list="formOption" />
      </a-card>
      <a-card>
        <title-name title="项目运行情况综述" />
        <custom-form ref="form1" :is-validate="true" :edit-model="''" :rules="rules1" :form="form1" :form-list="formOption1" />
      </a-card>
      <a-card>
        <title-name title="对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述" />
        <a-table ref="table" :columns="columns" :data-source="tableData" :pagination="false" bordered :scroll="{ x: width }" row-key="id">
          <template v-for="{ dataIndex } in columns" :slot="dataIndex" slot-scope="text, record">
            <span :key="dataIndex">
              <BaseTextarea v-if="info.pageType === 'update' && dataIndex === 'describe1'" v-model="record[dataIndex]" :max-length="300" :placeholder="record.placeholder" class="input" />
              <template v-else>{{ record[dataIndex] }}</template>
            </span>
          </template>
        </a-table>
      </a-card>
      <a-card>
        <title-name title="下月工作的主要计划及思路" />
        <custom-form ref="form2" :is-validate="true" :edit-model="''" :rules="rules2" :form="form2" :form-list="formOption2" />
      </a-card>
      <a-card>
        <title-name title="需公司、二级单位解决的主要问题" />
        <a-button v-if="info.pageType === 'update'" type="primary" class="add" @click="handleAdd">
          增行
        </a-button>
        <a-table ref="table1" :columns="columns1" :data-source="tableData1" :pagination="false" bordered row-key="id">
          <template v-for="{ dataIndex } in columns1" :slot="dataIndex" slot-scope="text, record, index">
            <span :key="dataIndex">
              <template v-if="info.pageType === 'update'">
                <a v-if="dataIndex === 'operation'" class="del_btn" @click="handleDelete(index)">删除</a>
                <BaseInput v-else v-model="record[dataIndex]" :max-length="300" placeholder="请输入描述" :class="dataIndex !== 'remark' ? 'input' : ''" />
              </template>
              <template v-else>{{ record[dataIndex] }}</template>
            </span>
          </template>
        </a-table>
      </a-card>
      <div v-if="!isAudit" class="page-btn-right-top">
        <a-button v-if="info.pageType === 'update'" class="ml20" type="primary" :loading="submiting" @click="handleSubmit(0)">
          保存草稿
        </a-button>
        <a-button v-if="info.pageType === 'update'" type="primary" class="ml20" :loading="submiting" @click="handleSubmit(1)">
          提交
        </a-button>
        <a-button class="ml20" @click="$close">
          关闭
        </a-button>
      </div>
    </a-spin>
    <!-- 选择审批人的弹窗 -->
    <selectApprover :isCloseUpper="true" :businessId="businessId" :processConfig="processConfig"></selectApprover>
  </base-breadcrumb>
</template>
<script>
import { formOption, formOption1, formOption2, columns1 } from './model.js'
import { view } from '@/api/project/projectManagerMonthlyReport'
export default {
  name: 'projectManagerMonthlyReportView' + Date.now(),
  props: {
    // 审批时
    isAudit: {
      type: Boolean,
      default: false
    },
    // 审批时使用审批接口查询的详情数据
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  data() {
    return {
      // 加载
      loading: false,
      // 基本信息表单
      form: {},
      // 基本信息表单选项
      formOption,
      // 项目运行情况综述表单
      form1: {},
      // 对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述表头
      columns: [],
      // 对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述表数据
      tableData: [],
      // 对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述表格宽度
      width: 100,
      // 下月工作的主要计划及思路表单
      form2: {},

      // 需公司、二级单位解决的主要问题表数据
      tableData1: [],
      // 提交中
      submiting: false,
      // 流程使用
      businessId: null,
      processConfig: null
    }
  },
  computed: {
    // 地址携带信息
    info() {
      return this.$route.query
    },
    // 需公司、二级单位解决的主要问题表头
    columns1() {
      if (this.info.pageType == 'update') {
        return columns1
      } else {
        return columns1.filter(el => el.dataIndex !== 'operation')
      }
    },
    // 项目运行情况综述选项
    formOption1() {
      return formOption1.map(el => {
        if (this.info.pageType === 'update') {
          return el
        } else {
          return {
            ...el,
            disabled: true
          }
        }
      })
    },
    // 项目运行情况综述表单校验
    rules1() {
      const obj = {}
      formOption1.forEach(item => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    },
    // 下月工作的主要计划及思路表单选项
    formOption2() {
      return formOption2.map(el => {
        if (this.info.pageType === 'update') {
          return el
        } else {
          return {
            ...el,
            disabled: true
          }
        }
      })
    },
    // 下月工作的主要计划及思路表单校验
    rules2() {
      const obj = {}
      formOption2.forEach(item => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  watch: {
    // 监听审批接口返回时
    // data: {
    //   handler(newV, oldV) {
    //     if (this.isAudit && JSON.stringify(newV) !== '{}') {
    //       this.getData(newV)
    //     }
    //   },
    //   immediate: true
    // }
  },
  async mounted() {
    // if (!this.isAudit) {
    this.getData()
    // }
  },
  methods: {
    // 获取流程标识
    getProcessConfig() {
      return this.$getConfigFn('project_manager_monthly_report_three')
    },
    /**
     * @description: 获取数据
     * @param {object} data 审批详情数据
     * @return {void}
     */
    async getData(data) {
      this.loading = true
      try {
        // 审批时参数作为详情，非审批时接口获取数据
        // if (!this.isAudit) {
        const res = await view.queryProjectManagerMonthlyReportDetail(this.info.id)
        data = res.data
        // }
        // 基本信息
        this.formOption.forEach(el => {
          if (data[el.keyName]) {
            this.$set(this.form, el.keyName, data[el.keyName])
          }
        })
        // 项目运行情况综述
        this.formOption1.forEach(el => {
          if (data[el.keyName]) {
            this.$set(this.form1, el.keyName, data[el.keyName])
          }
        })
        // 对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述
        this.columns = data.measuresVO.header.map(el => {
          switch (el.dataIndex) {
            case 'sort': {
              return {
                ...el,
                width: 80,
                align: 'center',
                customRender: (text, record, index) => {
                  return index + 1
                }
              }
            }
            case 'item': {
              return {
                ...el,
                width: 120
              }
            }
            default: {
              if (data.measuresVO.header.length > 3) {
                return {
                  ...el,
                  width: 800,
                  scopedSlots: { customRender: el.dataIndex }
                }
              } else {
                return {
                  ...el,
                  scopedSlots: { customRender: el.dataIndex }
                }
              }
            }
          }
        })
        this.width = this.columns.reduce((p, c) => p + c.width, 0)
        this.tableData = data.measuresVO.content
        // 下月工作的主要计划及思路
        this.form2 = { nextMonthPlans: data.nextMonthPlans }
        // 需公司、二级单位解决的主要问题
        if (data.settleIssueListVO.length > 0) {
          this.tableData1 = data.settleIssueListVO
        } else {
          if (this.info.pageType === 'update') {
            this.handleAdd()
          }
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    /**
     * @description: 新增行
     * @param {void}
     * @return {void}
     */
    handleAdd() {
      const data = {}
      this.columns1.forEach(el => {
        if (el.dataIndex) {
          data[el.dataIndex] = null
        } else {
          data.id = 'temp' + Date.now()
        }
      })
      this.tableData1.push(data)
    },
    /**
     * @description: 需公司、二级单位解决的主要问题删除行
     * @param {number} index 数据索引
     * @return {void}
     */
    handleDelete(index) {
      const vm = this
      this.$confirm({
        title: '温馨提示',
        content: '请确认是否要删除该条数据？',
        okType: 'danger',
        onOk() {
          vm.tableData1.splice(index, 1)
        }
      })
    },
    /**
     * @description: 表格校验
     * @param {array} data 校验数据
     * @param {array} required 必填项
     * @return {boolean} 是否通过校验
     */
    verify(data, required) {
      return !data.some(el => {
        for (let item in required) {
          if ((el[required[item]] ?? '') === '') {
            return true
          }
        }
      })
    },
    /**
     * @description: 提交
     * @param {number} status 状态0保存草稿，1提交
     * @return {void}
     */
    handleSubmit(status) {
      // 提交
      if (status === 1) {
        // 项目运行情况综述校验
        this.$refs.form1.validate(valid => {
          if (valid) {
            // 对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述校验
            if (this.verify(this.tableData, ['describe1'])) {
              // 下月工作的主要计划及思路校验
              this.$refs.form2.validate(valid => {
                if (valid) {
                  // 需公司、二级单位解决的主要问题校验
                  if (this.verify(this.tableData1, ['problemSolved', 'temporalDemand', 'assortUnit', 'assortPost'])) {
                    const vm = this
                    vm.handleFun(status)
                  } else {
                    this.$confirm({
                      title: '温馨提示',
                      content: '请将需公司、二级单位解决的主要问题填写完整'
                    })
                  }
                } else {
                  this.$confirm({
                    title: '温馨提示',
                    content: '请将下月工作的主要计划及思路填写完整'
                  })
                }
              })
            } else {
              this.$confirm({
                title: '温馨提示',
                content: '请将对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述填写完整'
              })
            }
          } else {
            this.$confirm({
              title: '温馨提示',
              content: '请将项目运行情况综述填写完整'
            })
          }
        })
      }
      // 草稿
      else {
        this.handleFun(status)
      }
    },
    /**
     * @description: 提交接口
     * @param {number} status 状态0保存草稿，1提交
     * @return {void}
     */
    async handleFun(status) {
      this.processConfig = null
      this.submiting = true
      const { id, changed } = this.info
      const { runSituation, performanceSituation, describe, measures } = this.form1
      const { tableData: measuresList, tableData1: settleIssueList } = this
      const { nextMonthPlans } = this.form2

      // 提交
      if (status === 1) {
        const processConfig = await this.getProcessConfig()

        this.submitApprovalConfirm(processConfig, flag => {
          if (!flag) {
            this.submiting = false
            return
          }
          // 业务逻辑
          view
            .batchUpdateMonthlyReport({
              id,
              changed,
              status,
              // 项目运行情况综述
              runSituation,
              performanceSituation,
              describe,
              measures,
              // 对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述
              measuresList: measuresList.map(el => {
                return {
                  ...el,
                  describe: el['describe1']
                }
              }),
              // 下月工作的主要计划及思路
              nextMonthPlans,
              // 需公司、二级单位解决的主要问题
              settleIssueList
            })
            .then(({ code }) => {
              if (code === 200) {
                this.$message.success('提交成功')
                // 流程组件需要
                this.businessId = id
                this.processConfig = processConfig
              }
            })
            .finally(() => {
              this.submiting = false
            })
          return
        })
      }

      // 草稿
      if (status === 0) {
        view
          .batchUpdateMonthlyReport({
            id,
            changed,
            status,
            // 项目运行情况综述
            runSituation,
            performanceSituation,
            describe,
            measures,
            // 对本月项目主要管理的结果、做法、亮点、问题、风险及改进措施进行描述
            measuresList: measuresList.map(el => {
              return {
                ...el,
                describe: el['describe1']
              }
            }),
            // 下月工作的主要计划及思路
            nextMonthPlans,
            // 需公司、二级单位解决的主要问题
            settleIssueList
          })
          .then(({ code }) => {
            if (code === 200) {
              this.$message.success('提交成功')
              this.$close()
            }
          })
          .finally(() => {
            this.submiting = false
          })
        return
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.add {
  margin-right: 20px;
  margin-bottom: 20px;
}
@{deep}.input {
  .ant-input,
  .ant-input-number,
  .ant-select-selection {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
}
.view-wrapper {
  .ant-card {
    box-shadow: none;
    margin-bottom: 0;
  }
}
.ant-card-bordered {
  border: none;
}
</style>
